<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
		<el-menu
        :default-active="menuActiveName"
        :collapse="sidebarFold"
        :default-openeds="openeds"
        :collapseTransition="false"
        class="site-sidebar__menu">

        <!-- :default-openeds="openeds" -->

        <!-- <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">流程预警地图</span>
        </el-menu-item> -->

        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import { isURL } from '@/utils/validate'
import SubMenu from './main-sidebar-sub-menu'
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        openeds:[]//'38'
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { 
          this.$store.commit('common/removeMenu', {name: '供应商及相关合同信息查询'})
          return this.$store.state.common.menuList
        },
        set (val) { 
          this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {

      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)

      console.log("======kou",this.dynamicMenuRoutes)
      console.log("======kou",this.dynamicMenuRoutes)
      if(this.dynamicMenuRoutes && this.dynamicMenuRoutes.length > 0){
        var defaultMenu = this.dynamicMenuRoutes[0];

        this.$router.push({ name: defaultMenu.name})
        this.menuActiveName = defaultMenu.meta.menuId+''
        this.mainTabsActiveName = defaultMenu.name
        this.openeds=[defaultMenu.meta.menuId+'']
      }else{
         this.$router.push({ name: '302'})
      }

      /* this.$router.push({ name: 'home'})
      this.menuActiveName = 'home'
      this.mainTabsActiveName = '首页' */
    },
    methods: {
      // 路由操作
      routeHandle (route) {
	    //console.log(route);
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }

            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>

<style scoped>
  .site-sidebar__menu.el-menu {
    width: 220px;
    max-height: 80%;
  }

  .site-sidebar__inner {
    width: 240px;
    padding-bottom: 0;
  }
  .site-sidebar{
    position: fixed;
    /* top: 50px; */
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width: 220px;
    overflow: hidden;
  }
</style>
